<template>
	<div class="ratingselect">
		<div class="rating-type border-1px" >
			<span class="block all" 
			:class="{active:selectType === 2}"
			@click="handleTypeClick(2,$event)"
			>{{desc.all}}<span class="count">{{ratings.length}}</span></span>
			<span class="block positive"
			:class="{active:selectType === 0}"
			@click="handleTypeClick(0,$event)"
			>{{desc.positive}}<span class="count">{{positive.length}}</span></span>
			<span class="block negative"
			:class="{active:selectType === 1}"
			@click="handleTypeClick(1,$event)"
			>{{desc.negative}}<span class="count">{{negative.length}}</span></span>
		</div>
		<div class="switch" 
		:class="{active:onlyContent}"
		@click="handleToggleClick"
		>
			<span class="iconfont swicon">&#xe60c;</span>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>

<script>
	var POSITIVE = 0
	var NEGATIVE = 1;
	var ALL = 2;
	export default{
		props:{
			ratings:{
				type:Array,
				default:function(){
					return []
				}
			},
			selectType:{
				type:Number,
				default:ALL
			},
			onlyContent:{
				type:Boolean,
				default:false
			},
			desc:{
				type:Object,
				default:function(){
					return{
						all:"全部",
						positive:"满意",
						negative:"不满意"
					}
				}
			}
		},
		computed:{
			positive:function(){
				return this.ratings.filter(function(rating){
					return rating.rateType === POSITIVE
				})
			},
			negative:function(){
				return this.ratings.filter(function(rating){
					return rating.rateType === NEGATIVE
				})
				
			}
		},
		methods:{
			handleTypeClick:function(type,event){
				if(!event._constructed){//betterscroll 派发的点击事件带了_constructed是为true  浏览器原生的不带这个参数
					return
				}
				this.selectType = type;
				this.$dispatch("ratingtype.select",type)
			},
			handleToggleClick:function(){
				if(!event._constructed){//betterscroll 派发的点击事件带了_constructed是为true  浏览器原生的不带这个参数
					return
				}
				this.onlyContent = !this.onlyContent
				this.$dispatch("content.toggle",this.onlyContent)
			}
		}		
	}
</script>

<style lang="stylus" scoped="scoped">
	@import "../../common/stylus/index.styl"
	.ratingselect {
		
	}
	.rating-type {
		padding: 18px 0px;
		margin: 0px 18px;
		border-1px(rgba(7,17,27,0.1))
		font-size: 0px;
	}
	.block {
		display: inline-block;		
		padding: 8px 12px;
		margin-right: 8px;
		border-radius:1px ;
		color: rgb(77,85,93);
		font-size: 12px;
	}
	.positive,.all {
		background:rgba(0,160,200,0.2);
	}
	.negative {
		background:rgba(77,85,93,0.2);
	}
	.count {
		font-size: 8px;
		margin-left: 2px;
		line-height: 16px;
	}
	.positive.active,.all.active{	
		color: #fff;
		background: rgb(0,160,200);
	} 
	.negative.active{
		background:rgb(77,85,93);
		color: #fff;
	}
	.switch {
		padding: 12px 18px;
		line-height: 24px;
		border-bottom: 1px solid rgba(7,17,27,0.1);
		font-size: 24px;
		color: rgb(147,153,159);
		font-size: 0;
	}
	.swicon {
		display: inline-block;
		vertical-align: top;
		margin-right: 4px;
		line-height: 24px;
		font-size: 24px;
	}
	.text {
		font-size: 12px;		
	}
	.switch.active .swicon {
		color:#00c850 ;
	}
</style>
